<template>
    <view class="card">
        <view class="error" v-if="vuex_user.auth_status == 3">审核失败原因：{{ vuex_user.auth_desc }}</view>
        <view class="tit">
            <text>姓名</text>
            <text>*</text>
        </view>
        
        <view class="input">
            <u--input
                placeholder="请输入姓名"
                border="none"
                v-model="name"
                :customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"
            ></u--input>
        </view>
        
        <view class="tit">
            <text>身份证</text>
            <text>*</text>
        </view>
        <view class="input">
            <u--input
                placeholder="请输入身份证"
                border="none"
                v-model="card"
                type='idcard'
                :customStyle="inputStyle"
            ></u--input>
        </view>
        
        <view class="tit">
            <text>身份证正面</text>
            <text>*</text>
        </view>
        
        <view class="upload">
            <u-upload
                :fileList="fileList1"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                :maxCount="1"
                accept="image"
                width='500rpx'
                height='278rpx'
            >
                <view class="cards">请上传身份证正面</view>
            </u-upload>
        </view>
        
        <view class="tit">
            <text>身份证反面</text>
            <text>*</text>
        </view>
        
        <view class="upload">
            <u-upload
                :fileList="fileList2"
                @afterRead="afterRead"
                @delete="deletePic"
                name="2"
                :maxCount="1"
                accept="image"
                width='500rpx'
                height='278rpx'
            >
                <view class="cards">请上传身份证反面</view>
            </u-upload>
        </view>
        
        <view class="submit">
            <u-button v-if="vuex_user.auth_status == 0" type="success" text="点击认证" shape='circle' color='#30D6C2' @click="setProfile()"></u-button>
            
            <u-button v-else-if="vuex_user.auth_status == 2 || vuex_user.auth_status == 3" type="success" text="重新认证" shape='circle' color='#30D6C2' @click="setProfile()"></u-button>
            
            <u-button v-else-if="vuex_user.auth_status == 1" type="success" text="审核中" shape='circle' color='#30D6C2'></u-button>
        </view>
        
    </view>
</template>

<script>
    import conf from '@/common/config.js';
    export default {
        data() {
            return {
                fileList1: [],
                fileList2: [],
                name: '',
                card: '',
                inputStyle: {
                    background: '#F3F4F6',
                    padding: '0 15rpx',
                },
				sign_switch: 2, // 默认为不开启
            }
        },
        onLoad() {
			this.$API.commonConfig().then(res => {
				if (1 == res.code) {
					this.sign_switch = res.data.sign_switch
				}
				this.name = this.vuex_user.name
				this.card = this.vuex_user.id_card_no
				if (this.vuex_user.id_card_front) {
				    this.fileList1.push({
				        url: this.vuex_user.id_card_front_url,
				        filename: this.vuex_user.id_card_front
				    })
				}
				
				if (this.vuex_user.id_card_back) {
				    this.fileList2.push({
				        url: this.vuex_user.id_card_back_url,
				        filename: this.vuex_user.id_card_back
				    })
				}
			})
        },
        methods: {
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result.fullurl,
                        filename: result.url
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: conf.url_config + '/api/common/upload',
                        filePath: url,
                        header: {
                            Token: uni.getStorageSync('token')
                        },
                        name: 'file',
                        formData: {},
                        success: (res) => {
                            let data = JSON.parse(res.data)
                            console.log(data.data)
                            setTimeout(() => {
                                resolve(data.data)
                            }, 1000)
                        }
                    });
                })
            },
            setProfile() {
                let that = this
                let params = {
                    name: this.name,
                    card: this.card,
                };
                if (this.fileList1.length > 0) {
                    params.id_card_front = this.fileList1[0].filename
                }
                if (this.fileList2.length > 0) {
                    params.id_card_back = this.fileList2[0].filename
                }
                
                this.$API.idcard(params).then(res => {
                    that.$u.vuex('vuex_user', res.data.userinfo);
					if (1 == this.sign_switch) { //  第三方认证
						uni.navigateTo({
							url:'/pages/my/thirdfaceid'
						})
					} else {
						uni.showModal({
						    title: '提示',
						    content: '提交成功，请等待审核',
						    success: function (res) {
						        uni.navigateBack();
						    }
						})
					}
                }).catch(err => {
                    console.log('err', err)
                })
            },
        }
    }
</script>
<style>
    page {background-color: #ffffff;}
</style>
<style lang="scss">
.card {
    width: 700rpx;
    margin: 46rpx auto;
    .error {
        margin: 50rpx 20rpx;
        color: #E62020;
        line-height: 50rpx;
        font-size: 26rpx;
    }
    .tit {
        display: flex;
        flex-direction: row;
        align-items: center;
        text {
            height: 50rpx;
            font-size: 28rpx;
            font-weight: 400;
            color: #606266;
            line-height: 50rpx;
            &:nth-child(2) {
                color: #E62020;
                margin-left: 20rpx;
            }
        }
    }
    .input {
        margin: 24rpx 0 44rpx 0;
        .u-input {
            width: 670rpx;
            height: 90rpx;
            padding: 0 15rpx;
            background: #F3F4F6;
            border-radius: 8rpx;
        }
    }
    .upload {
        margin: 24rpx 0 44rpx 0;
        .cards {
            width: 500rpx;
            height: 278rpx;
            background: #F3F4F6;
            border-radius: 8rpx;
            opacity: 1;
            border: 2rpx solid #C0C4CC;
            font-size: 28rpx;
            font-weight: 400;
            color: #C0C4CC;
            line-height: 278rpx;
            text-align: center;
        }
    }
    
    .submit {
        position: fixed;
        width: 600rpx;
        height: 88rpx;
        bottom: 76rpx;
        left: 76rpx;
    }
}
</style>
